<template>
	<view>
		<uni-card :title="title" extra="额外信息">
			<template v-slot:title>
				<view class="gl-header" style="border-bottom: 2px solid #999;">
					<view class="gl-header-left">{{title}}</view>
					<view class="gl-header-right">
						<uni-data-select v-model="curPid" label="选择商户" placeholder="所有商户" emptyTips="加载商户列表失败"
							:clear="true" :localdata="pidData" style="width: 320px;"
							@change="curpidChange"></uni-data-select>
						<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
							@click="()=>{this.page=1;this.refresh();}">
							<uni-icons type="reload" size="18" color="#fff"></uni-icons>
							<text style="font-size: small;">刷新</text>
						</view>
						<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
							@confirm="refresh"></uni-search-bar>
					</view>
				</view>
			</template>

			<view class="gl-body table-container" :style="{height:swiperH+'px'}">
				<uni-table stripe type="selection" emptyText="暂无更多数据">
					<uni-tr class="table-head">
						<uni-th align="center" width="30">ID</uni-th>
						<uni-th>名称</uni-th>
						<uni-th>条码</uni-th>
						<uni-th>货号</uni-th>
						<uni-th>SPU名称</uni-th>
						<uni-th>SPU状态</uni-th>
						<uni-th>SPU上架</uni-th>
						<uni-th>商户</uni-th>
						<uni-th>成本价/指导价/会员价</uni-th>
						<uni-th>库存</uni-th>
						<uni-th>状态</uni-th>
						<uni-th>上架</uni-th>
						<uni-th>
							<view style="display: flex;align-items: center;gap: 10px;">
								<view class="gl-link gl-link-base" @click="()=>{this.page=1;this.refresh();}">刷新
								</view>
							</view>
						</uni-th>
					</uni-tr>


					<uni-tr v-for="(item, index) in tmpData" :key="index">
						<uni-td>{{item.id}}</uni-td>
						<uni-td>
							<view class="gl-td-item" @click="eventShow(item.id)"><text
									style="font-weight: bold;">{{item.name}}</text></view>
						</uni-td>
						<uni-td>
							<view class="gl-td-item">{{item.idcode}}</view>
						</uni-td>
						<uni-td>
							<view class="gl-td-item">{{item.sdcode}}</view>
						</uni-td>
						<uni-td>
							<view class="gl-td-item" @click="eventShowSpu(item.sub_spu?.id)">{{item.sub_spu?.name}}
							</view>
						</uni-td>
						<uni-td>
							<switch :checked="Boolean(item.sub_spu?.status)" :disabled="Boolean(item.sub_spu?.spu)"
								style="transform:scale(0.7)"
								@change="(e)=>{this.stateSpuChange(e.detail.value, item.sub_spu?.id)}" />
						</uni-td>
						<uni-td>
							<switch :checked="Boolean(item.sub_spu?.is_list)" style="transform:scale(0.7)"
								@change="(e)=>{this.onlistSpuChange(e.detail.value, item.sub_spu?.id)}" />
						</uni-td>
						<uni-td>
							<view class="gl-td-item">{{item.sub_pid?.nicename}}</view>
						</uni-td>
						<uni-td>
							<view style="display: flex;gap: 10px;">
								<text class="gl-link-success">￥{{zipPrice(item.minprice)}}</text>
								<text class="gl-link-base">￥{{zipPrice(item.money)}}</text>
								<text class="gl-link-error">￥{{zipPrice(item.price)}}</text>
							</view>
						</uni-td>
						<uni-td>{{item.fund}}</uni-td>
						<uni-td>
							<switch :checked="Boolean(item.status)" :disabled="Boolean(item.sku)"
								style="transform:scale(0.7)"
								@change="(e)=>{this.stateChange(e.detail.value, item.id)}" />
						</uni-td>
						<uni-td>
							<switch :checked="Boolean(item.is_line)" style="transform:scale(0.7)"
								@change="(e)=>{this.onlistChange(e.detail.value, item.id)}" />
						</uni-td>
						<uni-td>
							<view style="display: flex;align-items: center;gap: 10px;">
								<view class="gl-link gl-link-base" @click="eventShow(item.id)">编辑</view>
								<view style="width:128px;"></view>
							</view>
						</uni-td>
					</uni-tr>

				</uni-table>
			</view>


			<view slot="actions" class="gl-footer">
				<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
					@change="refresh" />
			</view>
		</uni-card>

		<popSkuCardVue ref="popSkuCard" @refresh="refresh"></popSkuCardVue>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import popSkuCardVue from '@/components/sub-product/pop-sku-card.vue';
	export default {
		data() {
			return {
				swiperTop: 0,
				swiperH: 0,
				count: 0, // 记录数
				size: 50, // 页大小
				page: 1, // 当前页	
				title: '商品SKU',
				search: null,
				sConf: getApp().globalData,
				tmpData: [],
				pidData: [],
				curPid: null,
				curSpu: null
			}
		},
		mounted() {
			console.log('mounted sub-staff-list');
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
			this.refresh();
		},
		components: {
			popSkuCardVue
		},
		methods: {
			async refresh() {
				await this.loadPlaceData().then(res => {
					console.log('加载商户列表', res);
					let tmpData = []
					res.resmsg.forEach(item => {
						tmpData.push({
							value: item.id,
							text: item.nicename
						})
					})
					this.pidData = tmpData
				})
				await this.loadDefData().then((res) => {
					console.log('加载SKU成功', res);
					this.tmpData = res.resmsg;
					this.count = res.count;
					this.size = res.size;
				});
			},
			zipPrice(e) {
				return (e / 100).toFixed(2) || 0.00
			},
			async curpidChange(e) {
				console.log('curpidChange', e);
				this.page = 1
				await this.loadDefData().then((res) => {
					console.log('加载SKU成功', res);
					this.tmpData = res.resmsg;
					this.count = res.count;
					this.size = res.size;
				});

			},
			async changeSpu(e) {
				return
				this.curSpu = e;
				await this.loadDefData().then((res) => {
					console.log('加载SKU成功', res);
					this.tmpData = res.resmsg;
					this.count = res.count;
					this.size = res.size;
					this.curSpu = null
				});
			},
			stateSpuChange(e, idx) {
				console.log('stateChange', e, idx);
				let that = this;
				let data = {
					'status': e ? 1 : 0
				}
				that.loadSpuUpdateData(idx, data);
			},
			onlistSpuChange(e, idx) {
				console.log('onlistChange', e, idx);
				let that = this;
				let data = {
					'is_list': e ? 1 : 0
				}
				that.loadSpuUpdateData(idx, data)
			},
			stateChange(e, idx) {
				console.log('stateChange', e, idx);
				let that = this;
				let data = {
					'status': e ? 1 : 0
				}
				that.loadUpdateData(idx, data);
			},
			onlistChange(e, idx) {
				console.log('onlistChange', e, idx);
				let that = this;
				let data = {
					'is_line': e ? 1 : 0
				}
				that.loadUpdateData(idx, data)
			},
			eventShowSpu(e) {

			},
			eventShow(e) {
				this.$refs.popSkuCard.open(e)
			},
			loadSpuUpdateData(idx, data) {
				let host = this.sConf.host + '/admin/cargoBase/' + idx + '/'
				let token = this.sConf.auth.token
				psMethod.authenticatorPatchSync(host, token, data).then(res => {
					console.log('修改属性', res);
					this.refresh()
				}).catch(err => {
					uni.showToast({
						title: '操作失败',
						icon: 'error'
					})
				})
			},
			loadUpdateData(idx, data) {
				let host = this.sConf.host + '/admin/cargoSku/' + idx + '/'
				let token = this.sConf.auth.token
				psMethod.authenticatorPatchSync(host, token, data).then(res => {
					console.log('修改属性', res);
					this.refresh()
				}).catch(err => {
					uni.showToast({
						title: '操作失败',
						icon: 'error'
					})
				})
			},
			loadDefData() {
				let host = this.sConf.host + '/admin/cargoSku/'
				let token = this.sConf.auth.token
				let data = {
					'page': this.page,
					'size': this.size
				};
				if (this.search) {
					data['search'] = this.search
				}
				if (Boolean(this.curPid)) {
					data['pid'] = this.curPid
				}
				if (Boolean(this.curSpu)) {
					data['gid'] = this.curSpu
				}
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '加载中'
					})
					psMethod.authenticatorGetSync(host, token, data).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					}).finally(() => {
						uni.hideLoading()
					})
				})
			},
			loadPlaceData() {
				let host = this.sConf.host + '/admin/placeList/';
				let token = this.sConf.auth.token || '';
				let data = {
					ordering: '-id',
					status: 1
				}
				return new Promise((resolve, reject) => {
					psMethod.authenticatorGetSync(host, token, data).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			},
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-body').boundingClientRect();
					query.select('.gl-footer').boundingClientRect();
					query.exec((res) => {
						this.swiperTop = Math.ceil(res[0].top);
						this.swiperH = wh - Math.ceil(res[0].top) - Math.ceil(res[1].height) - 20;
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gl-td-item {
		max-width: 96px;
		word-wrap: break-word;
	}

	/* 表格垂直滚动 */
	.table-container {
		/* height: 400px; */
		overflow-y: auto;

		::v-deep .uni-table .table-head th {
			font-weight: bold;
			z-index: 2;
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}

		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>